<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			*{
				margin: 0px auto;
				padding: 0px;
				}
			
			
					.a1{
						display:block;
						overflow: hidden;
						width: 120px;
						float: left;
						text-align: center;
						font-size: 40px;
						font-family: "宋体";
						background-color: aqua;
						margin: auto 0px;
						padding:0px;
						background-color: white;
						text-decoration: none;
						color: saddlebrown;
						
					}
					.a1:hover{color: sandybrown;}
					.a11{background: url(img/1.png)0 0;display: block;float: left;width: 48px;height: 48px;}
					.a11:hover{background:url(img/11.png) 0 0 ;}
					.a22{background: url(img/2.png)0 0;display: block;float: left;width: 48px;height: 48px;}
					.a22:hover{background:url(img/22.png)0 0;}
					.a33{background: url(img/3.png);display: block;float: left;width: 48px;height: 48px;}
					.a33:hover{background: url(img/33.png)0 0;}
			.box-top{
			background-color: white;
			width: 100%;
			height: 110px;
			margin: 0 auto;
			position: fixed;
			}
			.top{
				margin: 0px auto;
				/* background-color: pink; */
				width: 1500px;
				height: 110px;
				}
				
				.top1{width: 250px;float: left;height: 110px;}
				.top2{width: 600px ;/* background-color: yellow; */float: left;height: 60px;margin-top: 30px;}
				.top3{width: 500px;height: 100px;float: left;background-color: white;}
				.top4{width: 48px;height: 48px;float: left;margin-top: 30px;}
			.box-body{
				
				width: 1500px;
				height: 910px;
				margin: 0px auto;
				
				}
				.people{background-color:burlywood;
				width: 450px;height: 400px;float: right;
				margin-top: 100px;margin-right: 50px;
				 border: 0px solid black ;
				  border-radius: 50px;}
				 h1{font-size: 30px;font-family: "新宋体";}
				 .input1 {
				   width: 300px;
				   height: 40px;
				   padding: 12px 20px;
				   margin: 8px 0;
				   display: block;
				   border: 0px solid black;
				   border-radius: 4px;
				 margin-top: 20px;
				   margin-left: 60px;outline: none;
					outline: none;
					background-color:bisque;
				 }
				 .input2 {
					  margin-top: 20px;
				   width: 150px;
				   height: 40px;
				   padding: 12px 20px;
				   margin-left: 60px;outline: none;
				   display: block;
				   border: 0px solid black;
				   border-radius: 4px;float: left;
				 background-color: bisque;
				   
				 					
				 }
				 .input3{float:left;width:100px;
				 margin-top:30px ;
				 height: 50px;margin-left: 10px;
				   cursor: pointer;  text-decoration: none;
				   outline: none;
				 border: 0px soild #CCCCCC;
				 border: none;
				 background-color: bisque;text-decoration: none;
				 border-radius: 10px ;padding: 5px 5px;}
				 .button4{margin-top: 45px;width:200px ;
				 height: 60px;cursor: pointer; margin-left: 120px;
				 font-size: 30px;font-family: "宋体";
 				 background-color:bisque;border: none;
				 border-radius: 20px;outline: none;}
				.body-p{background: url(img/bb.png);width: 1500px;height: 801px;}
				.blank1{width: 1500px;height: 110px;background-color: white;}
				.body-1{width: 1500px;height: 600px;background-color: white;}
				.body-2{width: 1500px;height: 500px;background-color:white;}
				.body-2-1{width: 500px;float: left;}
			.box-bottom{background-color: saddlebrown;width: 1500px;margin: 0px auto;height: 80px;}
			.a2{text-decoration: none;
			padding: 5px 20px;color: white;border-right: 1px solid white;display: block;float: left;font-size: 20px;margin-top: 15px;}
			.a3{text-decoration: none;padding:5px 5px;color: white;display: block;float: left;font-size: 20px;margin-top: 15px;}
			.bottom1{width: 1000px;height: 80px;margin-left: 0px;float: left;}
			.a2:hover{color: #FFA500;}
			.a3:hover{color: #FFA500;}
			.p1{font-size: 15px;color: #FFFFFF;}
			.bottom2{float: left;width: auto;height: auto;margin-top: 25px;}
			.bottom3{width: auto;height: auto;float: left;margin-left: 30px;}
			.box-bottom2{width: 1500px;background-color: saddlebrown;margin: 0px auto;height: 80px;}
			.bottom4{width: 140px;height: 40px;float: left;margin-top: 10px;margin-left: 40px;}
			.bottom5{width: 700px;height:70px;float: left;margin-left: 100px;}
			.p33{color: white;}
		</style>
	</head>
	<body style="background-color:chocolate;">
		<!-- 顶部悬浮菜单 -->
		<div class="box-top">
		<div class="top">
			<div class="top1">
							<img src="./img/logo.png">
						</div>
						<!-- logo -->
						<div class=top2>
                            <a class="a1" href="index.html">首页</a>
							<a class="a1"href="cake.html">蛋糕</a>
							<a class="a1"href="bread.html">面包</a>
							<a class="a1"href="milk.html">下午茶</a>
							<a class="a1"href="plan.html">策划书</a>
				</div>
  
			<div class="top3">
				
			</div>	
	
			<div class="top4"><a href="people.html"class="a11"></a></div>
			<div class="top4"><a href="shopcar.html"class="a22"></a></div>
			<div class="top4"><a href=""class="a33"></a></div>
			<!--三个图形按钮 --> 
		</div>
		</div>
		<div class="box-body">
			<div class="blank1"></div>
			<div class="body-p">
				<div class="people">
					<br />
					<br />
					
					<center><h1>手机验证码登录</h1></center>
					   <input type="text" class="input1"
					
					   placeholder="请输入你的手机号">
					  <input type="text"
					  			class="input2"		
					   placeholder="请输入验证码">
				   <input type="button" value="获取验证码" class="input3">
					 <a href="index.html"><input type="button"value="登录"class="button4"></a>
				</div>
			</div>
			<!-- <div class="body-1"><a href=""><img src="img/111%20-%20副本.png"></a></div> -->
			<!-- <div class="body-2">
				<div class="body-2-1"><a href="milk.html"><img src="img/a1.png"></a></div>
				<div class="body-2-1" ><a href="cake.html"><img src="img/a2.png"></a></div>
				<div class="body-2-1"><a href="bread.html"><img src="img/a3.png"></a></div>
			</div> -->
		</div>
		<div class="box-bottom">
			<div class="bottom1">
				
				<a class="a2"href="">品牌动态</a>
				<a class="a2"href="">生产经营资质</a>
				<a class="a2"href="">企业合作</a>
				<a class="a2"href="">帮助服务</a>
				<a class="a2"href="">平台规则</a>
				<a class="a2"href="">发票申请</a>
				<a class="a2"href="">帮助服务</a>
				<a class="a3"href="">联系我们</a>
			</div>
			<div class="bottom2"><p class="p1">tel:19891990031</p></div>
			<div class="bottom3">
				<a class="a3"href="">wechat</a>
				<a class="a3"href="">wexin</a>
			<a class="a3"href="">京东商城</a>
						
			</div>
			
			
		</div>
		<div class="box-bottom2">	
			
			
			<div class="bottom5">
				<p class="p33">深圳市魔女烘培有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				粤ICP备16039394号-6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京公网安备44030702002399<br />
				公司地址：深圳市盐田区沙头角街道田心社区沙盐路3018号盐田现代产业服务中心(一期)A座13D-3
 </p></div>
 <div class="bottom4"><a href="#"><img src="img/b1.png" ></a></div>
 <div class="bottom4"><a href="#"><img src="img/b2.png"></a></div>
 </div>
	</body>
</html>
